<template>
  <div class="charge">
   <mt-header title="充币" fixed>
  <div slot="left">
    <mt-button icon="back" @click="back()"></mt-button>
  </div>
</mt-header>
<div class="charge_content">
  <div class="charge_box">
    <div class="charge-sel">
      <div class="mc_select" @click="selectMoney()">
        <span>{{popup}}充值</span>
        <i class="iconfont icon-you" style="color:#004097;font-size:12px;"></i>      
    </div>
    <p>{{address}}</p>
    </div>
    <div class="charge_ts">非{{popup}}充值将会导致资产流失</div>
    <div class="charge_payimg">
      <img :src="payimg">
    </div>
    <div>
      <div class="charge_payaddr">{{payaddr}}</div>
    <div class="copy" v-clipboard:copy="payaddr"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">复制地址</div>
    </div>
  </div>
  <div class="postlist">
    <button @click="postmoney()">我已转账，确认提交</button>
  </div>
</div>
<div class="pay-bg" v-if="flag">
        <div class="pay-tool">
            <div class="pay-tool-title border-bottom">
            <span  @click="backHandle()" class="iconfont icon-zuo"></span><strong>请输入交易密码</strong>
            </div>
            <div class="pay-tool-content">
            <div class="pay-tool-inputs">
                <div class="item" v-for="(i,key) in items" :key="key"><span class="icon_dot" v-if="password[i]"></span></div>
            </div>
            </div>
            <div class="pay-tool-keyboard">
            <ul>
                <li @click="keyUpHandle($event)" v-for="(val,key) in keys" :key="key">
                {{ val }}
                </li>
                <li class="del" @click="delHandle"><span class="icon-del" style="font-size:14px">回退</span></li>
            </ul>
        </div>
     </div>
   </div>
<mt-popup
        v-model="popupVisible">
        <div class="m_fade">
          <div class="mf_h">选择地址</div>
        <ul>
          <li v-for="(item,key) in userList" :key="key" @click="changethis(key)">
            <p>{{item.coinType}}</p>
            <p>{{item.address}}</p>
          </li>
        </ul>
        </div>
      </mt-popup>
  </div>
</template>
<script>
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0];
import { Header, Popup, Toast, MessageBox } from "mint-ui";
import { sysAddrs, recharge, userAddrs, userInfo, local } from "../api/api.js";
export default {
  name: "Charge",
  data() {
    return {
      msg: "",
      popupVisible: false,
      popup: "",
      payimg: "",
      payaddr: "",
      address: "",
      userList: [],
      items: [0, 1, 2, 3, 4, 5],
      keys: keys(),
      password: [],
      flag: false,
      status: 0,
      id: "",
      mobilephone: "",
      userstatus: 1
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    backHandle() {
      this.flag = false;
    },
    keyUpHandle(e) {
      let text = e.currentTarget.innerText;
      let len = this.password.length;
      if (!text || len >= 6) return;
      this.password.push(text);
      this.ajaxData();
    },
    delHandle() {
      if (this.password.length <= 0) return false;
      this.password.shift();
    },
    ajaxData() {
      if (this.userstatus == 1) {
        MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
          this.$router.push({ path: "/certification?status=1" });
        });
      } else if (this.userstatus == 3) {
        MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
          this.$router.push({ path: "/certification?status=3" });
        });
      }
      if (this.status == 1) {
        this.password = [];
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay/" + this.mobilephone });
          }
        );
      }
      if (this.status == 2 && this.userstatus == 2) {
        if (this.password.length >= 6) {
          let para = {
            token: sessionStorage.getItem("token")
              ? JSON.parse(sessionStorage.getItem("token"))
              : "",
            id: this.id,
            coinType: this.popup,
            receiveAddress: this.payaddr,
            payPwd: parseInt(this.password.join(" ").replace(/\s/g, "")),
            paymentAddress: this.address
          };
          recharge(para)
            .then(res => {
              this.password = [];
              if (res.code == 200) {
                this.flag = false;
                MessageBox({
                  title: "提交成功！",
                  message:
                    "需大约10分钟完成转账，您可以去账单列表查看转账记录及状态"
                });
              } else {
                Toast({
                  message: res.msg,
                  position: "bottom",
                  duration: 5000
                });
              }
            })
            .catch(err => {
              Toast({
                message: "请求超时",
                position: "bottom",
                duration: 5000
              });
            });
        }
        // console.log();
      }
      return false;
    },
    selectMoney: function() {
      if (this.userList.length > 0) {
        this.popupVisible = true;
      }
    },
    getsysAddrs() {
      let para = {
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : ""
      };
      sysAddrs(para)
        .then(res => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].coinType == this.popup) {
              this.payimg = local + res.data[i].qrcode;
              this.payaddr = res.data[i].address;
            }
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    onCopy: function(e) {
      Toast({
        message: "复制成功",
        position: "bottom",
        duration: 5000
      });
    },
    onError: function(e) {
      Toast({
        message: "复制失败",
        position: "bottom",
        duration: 5000
      });
    },
    postmoney() {
      this.password = [];
      // if (this.userstatus == 1) {
      //   MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
      //     this.$router.push({ path: "/certification?status=1" });
      //   });
      // } else if (this.userstatus == 3) {
      //   MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
      //     this.$router.push({ path: "/certification?status=3" });
      //   });
      // }
      // if (this.status == 1) {
      //   MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
      //     action => {
      //       this.$router.push({ path: "/pay/" + this.mobilephone });
      //     }
      //   );
      // }
      this.flag = true;
      if (this.status == 2 && this.userstatus == 2) {
        this.flag = true;
      }
    },
    changethis(e) {
      // console.log(e);
      this.popupVisible = false;
      this.popup = this.userList[e].coinType;
      this.address = this.userList[e].address;
      this.getsysAddrs();
    },
    getuseraddr() {
      let para = {
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : "",
        id: sessionStorage.getItem("user")
          ? JSON.parse(sessionStorage.getItem("user")).id
          : ""
      };
      userAddrs(para)
        .then(res => {
          // console.log(res);
          if (res.data.length > 0) {
            this.userList = res.data;
            this.popup = res.data[0].coinType;
            this.address = res.data[0].address;
            this.getsysAddrs();
          } else {
            MessageBox.confirm("您还没有地址，去添加地址？").then(action => {
              this.$router.push({ path: "/addAddr" });
            });
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    getuser() {
      let para = {
        id: this.id,
        token: localStorage.getItem("token")
      };
      userInfo(para)
        .then(res => {
          this.status = res.data.statusPay;
          this.userstatus = res.data.status;
          this.mobilephone = res.data.mobilephone;
          if (res.data.statusPay == 1) {
            MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
              action => {
                this.$router.push({ path: "/pay/" + res.data.mobilephone });
              }
            );
          } else if (res.data.statusPay == 2) {
          }
          // if (res.data.status == 1) {
          //   MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
          //     this.$router.push({ path: "/certification?status=1" });
          //   });
          // } else if (res.data.status == 3) {
          //   MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
          //     this.$router.push({ path: "/certification?status=3" });
          //   });
          // }
          if (res.data.status == 2 && res.data.statusPay == 2) {
            this.getuseraddr();
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    }
  },
  created() {},
  mounted() {
    this.id = this.$route.params.id;
    this.getuser();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/charge.css");
@import url("../../static/css/pay.css");
</style>
